<template>
       <el-row :gutter="10" style="margin-top: 10px">
            <el-col :xs="24" :md="24" :lg="24">
                <el-card v-loading="refreshLoading">
                    <p slot="header">
                        <i class="ios-film-outline" />
                        代办
                        <a href="#" style="float: right;" @click.prevent="getIndex()">
                            <i class="ios-loop-strong" />
                            刷新
                        </a>
                    </p>
                    <el-row :gutter="20">
                        <el-col :xs="6" :md="6" :lg="6">
                            <div class="info-card">
                                <div class="info-card-count">
                                    {{allDatas.toSignCount}}
                                </div>
                                <h3 class="info-card-title">待打印订单</h3>
                            </div>
                        </el-col>
                        <el-col :xs="6" :md="6" :lg="6">
                            <div class="info-card">
                                <div class="info-card-count">
                                    {{allDatas.toOutgoingCount}}
                                </div>
                                <h3 class="info-card-title">待出库订单</h3>
                            </div>
                        </el-col>
                        <el-col :xs="6" :md="6" :lg="6">
                            <div class="info-card">
                                <div class="info-card-count">
                                    {{allDatas.noStocks}}
                                </div>
                                <h3 class="info-card-title">缺货商品</h3>
                            </div>
                        </el-col>
                        <el-col :xs="6" :md="6" :lg="6">
                            <div class="info-card">
                                <div class="info-card-count">
                                    {{allDatas.toPurchase}}
                                </div>
                                <h3 class="info-card-title">库存告急</h3>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
</template>
<script>

export default {
    name: "Index",
    data() {
        return {
          
           allDatas: {
                toSignCount: 0,
                toOutgoingCount: 0,
                noStocks: 0,
                toPurchase: 0
            },
            
            refreshLoading: false,
          

        }
    },
    mounted: function() {
       
       this.getIndex();
   
    },
    methods: {
        
        getIndex: function() {
            var me = this;
            me.refreshLoading = true;
            me.$http.post("/stastis/index.do", {}).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.allDatas = body.obj;
                }
                me.refreshLoading = false;
            }, response => {
                me.refreshLoading = false;
            });
        },
        


       
        goRecharge: function() {
            this.$router.push({ name: "RechargeAdd" })
        },
        updateRate: function() {

        }


    },
    components: {
      

    }
}
</script>
<style scoped>
.info-card {
    text-align: center;
    background-color: #fff;
    padding-bottom: 20px;
}

.info-card-count {

    font-size: 20px;
}

.info-card-title {
    font-size: 12px;
}

.left-area {
    float: left;
    height: 100%;
    width: 36%;
    display: table;
    text-align: center;
}

.info-card-wrapper .content-con {
    width: 100%;
    height: 100%;
    position: relative;
}

.info2 {
    height: 240px;
    overflow-y: auto;
}

.notice {
    height: 240px;
    overflow: hidden;
}

.info2 li {
    list-style: none;
    line-height: 2;
    font-size: 16px;
}

.info2.img {
    text-align: center;
}

.info.img img {
    height: 100%;

    overflow: hidden;
}

.notice li {
    line-height: 30px;
    height: 30px;
    border-bottom: 1px dotted #cecece;
    cursor: pointer;
}

.notice li:hover {
    color: #2d8cf0;
}

.notice-title {
    text-overflow: ellipsis;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    font-size: 14px;
    float: left;
    position: relative;


}

.notice-title.top {
    color: #2d8cf0;
}

.notice-title font {
    margin-right: 5px;
}

.noticetitle {
    font-size: 18px;
    text-align: center;

    line-height: 20px;
    font-family: "微软雅黑";
    margin: 0px auto;
    clear: both;

    padding-bottom: 15px;
}

.noticecontent {
    font-size: 16px;
    text-align: center;
    text-align: left;
    line-height: 20px;
    margin-bottom: 40px;
}

.dhouse {
    border-bottom: 1px dotted #cecece;
    padding: 5px 0px;
}
</style>